<template>
    <view class="container" :style="themeColor">
        <view class="h5-box">
            <view class="sub-item">
                <view class="cell-item">
                    <text class="label"><text>*</text>项目名称</text>
                    <input
                        class="value value-input"
                        v-model="form.projectName"
                        placeholder="请输入项目名称"
                        placeholder-class="input-placeholder" />
                </view>
            </view>
            <view class="sub-item">
                <view class="cell-item">
                    <text class="label">报备人</text>
                    <input
                        class="value value-input"
                        v-model="userInfo.NickName"
                        :disabled="true"
                        placeholder-class="input-placeholder" />
                </view>
            </view>
            <view class="sub-item">
                <view class="cell-item">
                    <text class="label">导购员</text>
                    <input
                        class="value value-input"
                        v-model="form.guideName"
                        placeholder="请输入导购员名称"
                        placeholder-class="input-placeholder" />
                </view>
            </view>
            <view class="sub-item">
                <view class="cell-item" @click="areaSelectFn">
                    <text class="label"><text>*</text>地区选择</text>
                    <text class="value" :class="regionName == '' ? 'input-placeholder' : ''">{{
                        regionName ? regionName : "请选择所在地区"
                    }}</text>
                    <uni-icons class="icon-right" type="arrowright"></uni-icons>
                </view>
            </view>
            <view class="sub-item">
                <view class="cell-item address-item">
                    <text class="label"><text>*</text>详细地址</text>
                    <view class="dingwei">
                        <textarea
                            class="value-textarea"
                            v-model="form.address"
                            placeholder="请输入详细地址"
                            placeholder-class="input-placeholder"></textarea>
                        <view class="btn-location" @click="getLoaction">
                            <image src="/static/img/map.png"></image>
                            <iconsfont customIcons="icon-dizhi" color="#333333" size="30"></iconsfont>
                            <text>{{ form.Longitude ? "已定位" : "添加定位" }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="sub-item">
                <view class="cell-item">
                    <text class="label"><text>*</text>联系人</text>
                    <input
                        class="value value-input"
                        v-model="form.contactName"
                        placeholder="请输入联系人姓名"
                        placeholder-class="input-placeholder" />
                </view>
            </view>
            <view class="sub-item">
                <view class="cell-item input-item">
                    <text class="label"><text>*</text>手机号码</text>
                    <input
                        class="value value-input"
                        v-model="form.contactTel"
                        maxlength="11"
                        type="number"
                        placeholder="请输入手机号"
                        placeholder-class="input-placeholder" />
                </view>
            </view>
            <view class="sub-item">
                <view class="cell-item input-item" style="border: none">
                    <text class="label" style="width: 300rpx">项目信息(选填)</text>
                </view>
            </view>
            <view class="descriptionMain">
                <textarea
                    class="value-textarea"
                    v-model="form.description"
                    placeholder="请输入项目信息"
                    placeholder-class="input-placeholder"></textarea>
                <view class="img-cell">
                    <view class="" v-if="imageList.length < 9">
                        <view class="add-img" @tap="chooseImage">
                            <uni-icons type="camera" size="80"></uni-icons>
                            <text>添加图片</text>
                        </view>
                    </view>
                    <block v-for="(image, index) in imageList" :key="index">
                        <view class="img-item">
                            <image
                                class="img"
                                mode="aspectFill"
                                :src="easyGetImgUrl(image)"
                                :data-src="easyGetImgUrl(image)"
                                @tap="previewImage"></image>
                            <view @click="del(index)">
                                <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"> </uni-icons>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <text class="btn btn-success" @click="submit">提交</text>
        </view>
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="data" @pickArea="pickArea"></area-select>
        </uni-popup>
		<privacy-agreement></privacy-agreement>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { SaveOrderProject } from "@/service/api/order.js"
import { uploadImage } from "@/service/api/file.js"
import storage from "@/uni-sub-base/utils/storage.js"
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
import { mapbatchSmartParse } from "@/service/api/user.js"
import { batchSmartParse } from "@/service/api/member.js"
import privacyAgreement from "@/components/privacy-agreement/privacy-agreement.vue"
import permision from "@/utils/permission.js"
import config from "@/config/config.js"
export default {
    components: {
        areaSelect,
		privacyAgreement
    },
    data() {
        return {
            userInfo: {},
            form: {
                projectName: "",
                guideName: "",
                address: "",
                contactName: "",
                contactTel: "",
                description: "",
            },
            imageList: [],
            regionName: "",
            data: {
                AddressName: "",
                ContactName: "",
                ContactTel: "",
                ContactAddress: "",
                IsDefault: false,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                Longitude: "",
                Latitude: "",
                ZipCode: null,
            },
        }
    },
    onLoad(e) {},
    mounted() {
        let userInfo = storage.getCache("userInfo")
        this.userInfo = userInfo
    },
    methods: {
        ...mapMutations(["UP_PROJECT_VIEW"]),
        //选择图片
		//#ifdef APP
		async chooseImage(type) {
			const result = await permision.premissionCheck("EXTERNAL_STORAGE")
			if(result == 1) {  
			    // 此处处理各自业务 如：uni.chooseImage  
				let that = this
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ["album", "camera"], //从相册选择
				    success: function (res) {
				        that.upLoadPicFn(res)
				    },
				})
			}
		},
		//#endif
		// #ifndef APP
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 9, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], //从相册选择
                success: function (res) {
                    that.upLoadPicFn(res)
                },
            })
        },
		// #endif
        //删除图片
        del(index) {
            this.imageList.splice(index, 1)
        },
        //上传图片
        upLoadPicFn(files) {
            for (var i = 0; i < files.tempFilePaths.length; i++) {
                let param = {
                    filePath: files.tempFilePaths[i],
                    formData: {},
                }
                uploadImage(param).then((e) => {
                    if (e.Data) {
                        this.imageList.push(e.Data.FullPath)
                        if (this.imageList.length > 9) {
                            this.imageList.length = 9
                        }
                    }
                })
            }
        },
        //选择地区
        areaSelectFn() {
            this.$refs.areaSelect.open()
        },
        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.data = Object.assign(this.data, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.data.ProvinceName || ""}-${this.data.CityName || ""}${
                this.data.AreaName ? line + this.data.AreaName : ""
            }${this.data.StreetName ? line + this.data.StreetName : ""}`
            // this.data.ProvinceName?this.data.ProvinceName:'' +
            // this.data.CityName?"-"+this.data.CityName:''+
            // this.data.AreaName?"-"+this.data.AreaName:''+
            // this.data.StreetName?"-"+this.data.StreetName:''
        },
        getLoaction() {
            //#ifdef MP-WEIXIN
            this.getCenterLocation()
            //#endif
            //#ifdef APP
            let that = this
            uni.chooseLocation({
                success: function (res) {
                    console.log("位置名称：" + res.name)
                    console.log("详细地址：" + res.address)
                    console.log("纬度：" + res.latitude)
                    console.log("经度：" + res.longitude)
                    that.getAppP(res)
                    that.data.ContactAddress = res.name
                    that.data.Longitude = res.longitude
                    that.data.Latitude = res.latitude
                },
            })
            //#endif
            //#ifdef H5
            getLocation(
                (res) => {
                    if (res) {
                        this.data.ContactAddress = res.address.street + res.address.streetNum

                        this.getP(res.address)
                    }
                },
                (err) => {
                    console.log(err)
                },
            )
            //#endif
        },
        getCenterLocation() {
            var that = this
            wx.authorize({
                scope: "scope.userLocation",
                complete: function (res) {
                    wx.chooseLocation({
                        success(str) {
                            var getAddressUrl ='https://restapi.amap.com/v3/geocode/regeo?output=JSON&location='+str.longitude+','+str.latitude +
                                "&key=" +config.aMapKey.wx
                            wx.request({
                                url: getAddressUrl,
                                success: function (result) {
                                    var province = result.data.regeocode.addressComponent.province
                                    var city = result.data.regeocode.addressComponent.city
                                    var district = result.data.regeocode.addressComponent.district
                                    var address = result.data.regeocode.addressComponent.township+result.data.regeocode.addressComponent.streetNumber.street+result.data.regeocode.addressComponent.streetNumber.number
                                    

                                    that.data.ContactAddress = result.data.regeocode.addressComponent.streetNumber.street+result.data.regeocode.addressComponent.streetNumber.number
                                    that.data.Longitude = str.longitude
                                    that.data.Latitude = str.latitude
                                    that.getmapP(
                                        result.data.regeocode.addressComponent,
                                        address,
                                    )
                                },
                            })
                        },
                    })
                },
            })
        },
        getP(res) {
            let item = {
                ContactAddress: res.street + res.streetNum,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreeName: res.street,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        getAppP(res) {
            let item = {
                ContactAddress: res.address,
                ContactName: "aaa",
                ContactTel: "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        getmapP(res, address) {
            let item = {
                ContactAddress: address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreetName: res.township,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        //智能识别
        batchSmartParse(param) {
            batchSmartParse(param).then((res) => {
                if (res.Data && res.Data.list && res.Data.list.length > 0) {
                    let result = res.Data.list[0]
                    this.data.ProvinceId = result.ProvinceId
                    this.data.ProvinceName = result.ProvinceName
                    this.data.CityId = result.CityId
                    this.data.CityName = result.CityName
                    this.data.AreaId = result.AreaId
                    this.data.AreaName = result.AreaName
                    this.data.StreetId = result.StreetId
                    this.data.StreetName = result.StreetName
                    this.form.address = result.ContactAddress
                    this.getRegionName()
                }
            })
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList,
            })
        },
        submit() {
            if (this.form.projectName == "") {
                this.easyToast("请输入项目名称")
                return false
            }
            if (this.regionName == "") {
                this.easyToast("请选择所在地区")
                return false
            }
            if (this.form.address == "") {
                this.easyToast("请输入详细地址")
                return false
            }
            if (this.form.contactName == "") {
                this.easyToast("请输入联系人")
                return false
            }
            if (this.form.contactTel == "") {
                this.easyToast("请输入手机号")
                return false
            }
            if (this.form.contactTel) {
                let regMobile = /^1[3456789]\d{9}$/
                if (!regMobile.test(this.form.contactTel)) {
                    this.easyToast("请输入正确的手机号")
                    return false
                }
            }
            let param = this.form
            param.provinceId = this.data.ProvinceId
            param.cityId = this.data.CityId
            param.regionId = this.data.AreaId
            param.streetId = this.data.StreetId
            param.provinceName = this.data.ProvinceName
            param.cityName = this.data.CityName
            param.regionName = this.data.AreaName
            param.streetName = this.data.StreetName
            param.lat = this.data.Latitude ? this.data.Latitude : 0
            param.lng = this.data.Longitude ? this.data.Longitude : 0
            if (this.imageList.length > 0) {
                param.images = this.imageList.join(",")
            }
            SaveOrderProject(param).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    setTimeout(() => {
                        this.upOrderView()
                        this.easyGoBack()
                    }, 2000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        upOrderView() {
            this.UP_PROJECT_VIEW(new Date().getTime())
        },
    },
}
</script>

<style lang="scss" scoped>
page {
    background: #fff;
}
.container {
    padding-bottom: 200rpx;
}
.h5-box {
    background: #fff;
    border-radius: 24rpx;
    .link-box {
        display: flex;
        flex-direction: row;
        height: 60rpx;
        justify-items: center;

        .change-type {
            display: flex;
            flex: 1;
            color: $app-color-text-tip;
        }

        .forget-pwd {
            display: flex;
            flex: 1;
            justify-content: flex-end;
            color: $app-color-text-tip;
        }
    }
}
.sub-item:last-child {
    & > .cell-item {
        border-bottom: none;
    }
}
.cell-item {
    height: 112rpx;
    padding: 0 $app-page-padding;
    border-bottom: solid 1rpx #ebebeb;
    display: flex;
    flex-direction: row;
    align-items: center;
    .label {
        font-size: $font-size-32;
        color: $color-gray-1;
        width: 180rpx;
        display: block;
        text {
            color: #f93837;
        }
    }

    .value {
        flex: 1;
        display: flex;
        justify-content: space-between;
        font-size: $font-size-30;
        color: #323232;
    }

    .icon-right {
        margin-right: -8rpx;
    }
}
.input-placeholder {
    font-size: $font-size-32 !important;
    color: #bcbfcc !important;
}
.dingwei {
    background: #f6f7f7;
    border-radius: 8rpx;
    padding: 24rpx;
    width: calc(100% - 48rpx);
    flex: 1;
}
.address-item {
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: $app-page-padding;

    .label {
        margin-bottom: 10rpx;
    }

    .btn-location {
        flex: 1;
        display: flex;
        align-items: center;
        border-radius: 100rpx;
        justify-content: flex-end;
        color: #333333;
        margin-top: 30rpx;
        image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
        }
    }
    .value-textarea {
        width: 100%;
        height: 86rpx;
        margin-bottom: 10rpx;
    }
}
.login-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40rpx;
    padding: 0rpx 60rpx;
    .tourist {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #999;
        .yuan {
            width: 38rpx;
            height: 38rpx;
            background: #fdb52a;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20rpx;
            margin-right: 16rpx;
        }
    }
}
.descriptionMain {
    margin: 0 24rpx;
    background: #f7f7f7;
    border-radius: 16rpx;
    .value-textarea {
        padding: 24rpx;
        width: calc(100% - 48rpx);
        height: 140rpx;
    }
}
.img-cell {
    margin: 24rpx;
}
.bottom-bar {
    .btn {
        width: 100%;
        margin-left: 0;
        border-radius: 100rpx;
        height: 88rpx;
        font-size: 32rpx;
    }
}
</style>
